<template>
  <div id="layerSwitch">
    <el-radio-group v-model="radio" class="radio-group" @change="changeLayer">
      <el-radio :label="1" class="radio-item">矢量图层</el-radio>
      <el-radio :label="2" class="radio-item">居民地图层</el-radio>
      <el-radio :label="4" class="radio-item">交通图层</el-radio>
    </el-radio-group>
  </div>
</template>

<script>
export default {
  name: 'layerSwitch',
  props: {
    map: {
      type: Object,
      required: false
    }
  },
  data () {
    return {
      radio: 1
    }
  },
  methods: {
    changeLayer (layer) {
      const layers = this.map.getLayers()
      // 根据选择的radio值切换不同图层的可见性
      layers.getArray().forEach((lyr, index) => {
        lyr.setVisible(index + 1 === layer)
      })
    }
  }
}
</script>

<style lang="less" scoped>
#layerSwitch {
  position: absolute;
  width: 400px;
  top: 70px;
  right: 240px;
  z-index: 999;

  .radio-group {
    background-color: rgba(25, 1, 1, 0.5);
    height: 25px;
    align-items: center;
    justify-content: center;
    display: flex;
  }

  .radio-item {
    color: aliceblue;
    font-size: 12px;
    :hover {
      background-color: rgba(243, 243, 8, 0.511);
    }
  }
}
</style>
